<template>
  <div class="login">
    <div class="loginBox">
      <div ref="div" class="Title">欢迎登陆</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="0"
        class="demo-ruleForm"
      >
        <el-form-item class="itemBox" prop="username">
          <el-input
            :prefix-icon="Avatar"
            class="inputItem"
            placeholder="请输入账号"
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item class="itemBox" prop="password">
          <el-input
            :prefix-icon="Lock"
            class="inputItem"
            placeholder="请输入密码"
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="loginBtn" type="primary" @click="login(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
import type { FormInstance } from "element-plus";
import { adminLoginAPI } from "../request/api";
import Cookies from "js-cookie";
import { Lock, Avatar } from "@element-plus/icons-vue";
import { mapMutations, useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
let ruleForm = reactive<AdminData>({
  username: "daniao",
  password: "111111",
});

//ref<类型> 用来定义.value的值的类型
//  ref创建的变量名和模板上的ref属性一致的时候可以获取到对应组件的实例对象
let div = ref<HTMLDivElement>();
const store = useStore();

store.commit("userInfo/updateUsename", "你好");
const router = useRouter();
//验证账号格式属性
const validatorUsername = (rule: any, value: any, callback: any) => {
  /*  验证的元素
       rule: any,
      验证的值
       value: any,
      验证成功后执行回调,表示完成验证
      callback: any

      */
  //   console.log(rule);
  //   console.log(value);
  //   console.log(callback);
  if (!value.trim()) {
    callback(new Error("不能为空"));
    return;
  }
  if (value != "daniao") {
    callback(new Error("只能使用daniao账号登录"));
    return;
  }
  callback();
};
//验证密码
const validatorPassword = (rule: unknown, value: string, callback: any) => {
  if (!value.trim()) {
    callback(new Error("不能为空"));
    return;
  }
  if (value != "111111") {
    callback(new Error("密码是111111"));
    return;
  }
  callback();
};
//自定义表单校验规则
const rules = reactive({
  username: [{ validator: validatorUsername, trigger: "change" }],
  password: [{ validator: validatorPassword, trigger: "change" }],
});

let ruleFormRef = ref<FormInstance>();
//登录按钮
const login = async (fromRef?: FormInstance) => {
  //登录前再对整个表单进行验证
  let thePassage = await fromRef?.validate();
  //不通过不请求
  if (!thePassage) return;
  //发送登录请求
  let resLogin = await adminLoginAPI(ruleForm);
  if (resLogin.code == 200) {
    Cookies.set("token", resLogin.data.tokenHead + resLogin.data.token, {
      expires: 7,
    });

    //获取当前登录用户信息
    await store.dispatch("getAdminInfo");
    //跳到首页
    router.push("/homePage");
  } else if (resLogin.code === 404) {
    ElMessage({
      type: "error",
      message: "密码错误",
    });
  }

  // 获取当前登录用户信息;
  // let resUserInfo = await adminInfo();
  // if (resUserInfo.code === 200) {
  //   //将用户信息存入vuex
  //   store.commit("updateMenus", resUserInfo.data.menus);
  //   //保存用户名
  //   store.commit("updateUsename", resUserInfo.data.username);
  //   Cookies.set("username", resUserInfo.data.username);
  //   //跳到首页
  //   router.push("/homePage");
  //   console.log("执行跳转");
  // }
};
</script>
<style lang="less" scoped>
.login {
  height: 100vh;
  background-color: #2d3a4b;
}
.loginBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .demo-ruleForm,
  .Title {
    width: 418px;
  }
  .Title {
    padding: 10px 0;
    font-size: 24px;
    color: #fff;
    text-align: center;
  }
  .loginBtn {
    margin: 0 auto;
    width: 418px;
    height: 50px;
  }
  .inputItem {
    height: 50px;
    :deep(.is-focus) {
      box-shadow: none;
    }
  }
  :deep(.el-input__wrapper) {
    background-color: rgb(40, 52, 67);
    box-shadow: none;
  }
}
</style>
